// 交友墙页面
import React, { PureComponent } from 'react';
// 引入样式
import './scss/friend.scss';
import Axios from 'axios';
// 引入地址
import { webSite } from '../website.js';
import { message, Modal, Input } from 'antd';
// 引入仓库
import store from '../store/index';
const { TextArea } = Input;
export default class Friend extends PureComponent {
  constructor() {
    super()
    // 用户的渲染数据
    this.list = []
    this.state = {
      visible: false,
      // 交友宣言的输入框
      textArea: '',
      user: '默认用户'
    }
    // state的写法
    this.unSubscribe = store.subscribe(() => {
      // 强制更新
      this.forceUpdate()
    })
  }
  // 取消蒙层
  componentWillUnmount () {
    this.unSubscribe()
    // 把放歌的放到左边
    let musicFriend = document.getElementsByClassName('HomeAudioKong')[0];
    musicFriend.style.left = '80vw';
    musicFriend.style.top = '5vw';
    // 卸载异步操作设置状态
    this.setState = () => {
      return;
    }
  }

  // 网页加载时请求数据
  componentDidMount () {
    // 把放歌的放到左边
    let musicFriend = document.getElementsByClassName('HomeAudioKong')[0];
    musicFriend.style.left = '25vw';
    musicFriend.style.top = '2vw';
    // 网页加载请求
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/friend").then(err => {
      if (err.data.code === 'F0001') {
        this.list = err.data.data;
        this.forceUpdate();
      }
    }).catch(() => {
      message.error({ content: '网络差', className: 'bulletChatMessage' });
    })
  }

  // input输入时的回调函数
  handleInput = ({ target }) => {
    let { name, value } = target
    // 设置input和state同步
    this.setState({
      [name]: value
    })
  }

  // 刷新按钮
  ClickRefresh = () => {
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/friend").then(err => {
      if (err.data.code === 'F0001') {
        this.list = err.data.data;
        this.forceUpdate();
      }
    }).catch(() => {
      message.error({ content: '网络差', className: 'bulletChatMessage' });
    })
    // 提示用户刷新成功
    message.success({ content: '刷新成功', className: 'bulletChatMessage' });
  }

  // 判断男女的函数
  setFriend = (index) => {
    // 传进来的值是1 = 蓝色钉子  2 = 红色钉子
    if (index === 1) {
      return 'friend_ul_li friend_nan';
    }
    if (index === 2) {
      return 'friend_ul_li friend_nv';
    }
  }

  // 点击小飞机弹出对话框
  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  // 点击蒙层取消
  handleCancel = () => {
    this.setState({
      visible: false,
    });
  };

  // 提交按钮的事件
  formBtn = () => {
    let { userId, userQq } = store.getState().reducer;
    let textArea = this.state.textArea.replace(/\s+/g, "");
    if (!textArea) {
      message.error({ content: '请输入您的交友宣言', className: 'bulletChatMessage' });
      return;
    }
    // 用户的id和用户名都存在的情况下才会提交到后台
    if (userId && userQq) {
      // 向后台提交交友宣言
      Axios.create({
        baseURL: `${webSite}:3003`
      }).post("/friendText", { id: userId, userQq: userQq, friendText: textArea }).then(err => {
        if (err.data.code === 'F0002') {
          message.success({ content: '交友宣言已提交至管理员，审核后将会显示到页面上', className: 'bulletChatMessage' });
        }
      }).catch(() => {
        message.error({ content: '网络差', className: 'bulletChatMessage' });
      })
    } else {
      message.info({ content: '登录才能发送交友宣言', className: 'bulletChatMessage' });
    }
    // 关闭页面
    this.setState({
      visible: false,
      textArea: ''
    });
  }

  // 渲染页面在这里
  render () {
    return (
      <div className='friend' >
        {/* 顶部内容 */}
        < div className='friend_top' >
          <h2>交友墙</h2>
          <div className='friend_top_button'>
            {/* 刷新按钮 */}
            <div className='friend_Refresh' onClick={this.ClickRefresh}>
            </div>
            {/* 发送信息按钮 */}
            <div className='friend_aircraft' onClick={this.showModal}>
            </div>
            {/* 弹出内容 */}
            <Modal
              title="设置您的交友宣言"
              visible={this.state.visible}
              onCancel={this.handleCancel}
              onOk={this.formBtn}
              cancelText={'再想想'}
              okText={'提交宣言'}
              bodyStyle={{
                height: '46vw'
              }}
            >
              {/* 宣言内容 */}
              <TextArea rows={6} style={{ marginBottom: '5px', resize: 'none' }} placeholder='设置您的交友宣言' value={this.state.textArea} name='textArea' onChange={this.handleInput} maxLength='100' />
            </Modal>
          </div>
        </div>
        {/* 主要的评论展示 */}
        < ul className='friend_ul' >

          {
            this.list === [] ? '' : this.list.map((list, index) => {
              // 直接发起和用户的对话
              let getQq = `mqqwpa://im/chat?chat_type=wpa&uin=${list.frienduser}`;
              // 设置qq的头像
              let setQq = `http://q1.qlogo.cn/g?b=qq&nk=${list.frienduser}&s=640`;
              return (
                <li className={this.setFriend(list.sex)} key={index}>
                  <a href={getQq}>
                    <div className='friend_ul_li_img'>
                      <div className='friend_ul_li_img_img'>
                        <img src={setQq} alt="qq头像" />
                      </div>
                      <div className='friend_ul_li_div'>
                        <h2>{list.user}</h2>
                        <b>个性签名：</b>
                        <span>{list.userword}</span>
                      </div>
                    </div>
                    <div className='friend_ul_text'>
                      <h3 className='friend_ul_text_h3'>交友宣言：</h3>
                      {list.friendtext}
                    </div>
                  </a>
                </li>
              )
            })
          }
        </ul >
      </div >
    )
  }
}